<div class="content__title">
    <h1>
        ACL 访问控制
        <small>注意观察左边的菜单；ACLService提供一个完整的基于角色的访问控制的服务，若需要支持路由守卫，请配合ACLService与Route Guard配合简便实现。</small>
    </h1>
</div>
<page-header [title]="'asdfasdf'"></page-header>
<nz-card nzTitle="标题">
    klsjdf
</nz-card>
<div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="24">
        <nz-card nzTitle="按钮粒度">
            ACL原始数据：{{ aclSrv.data | json }}
            <button nz-button [acl]="'role-a'">role-a</button>
            <button nz-button [acl]="'role-b'" class="ml-sm">role-b</button>
        </nz-card>
    </div>
</div>
<div nz-row [nzGutter]="8">
    <div nz-col [nzSpan]="8">
        <nz-card nzTitle="全量">
            <button nz-button (click)="toggleFull()">
                <span>{{ full ? '离开' : '设置'}}权限</span>
            </button>
            <p class="pt-md">全量类指系统管理员角色，无任何受限。</p>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="8">
        <nz-card nzTitle="角色[role-a]">
            <button nz-button (click)="toggleRoleA()">
                <span>{{ roleA.length > 0 ? '离开' : '设置'}}权限</span>
            </button>
        </nz-card>
    </div>
    <div nz-col [nzSpan]="8">
        <nz-card nzTitle="角色[role-b]">
            <button nz-button (click)="toggleRoleB()">
                <span>{{ roleB.length > 0 ? '离开' : '设置'}}权限</span>
            </button>
        </nz-card>
    </div>
</div>
